<template>
  <el-form ref="form" :rules="rules" :model="currentTeam" label-width="100px" class="demo-form">
    <el-row :gutter="10">
      <el-col :span="17">
          <el-card class="box-card">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="currentTeam.name"></el-input>
            </el-form-item>
            <el-form-item label="所属机构">
              <el-cascader
                :options="departTree"
                v-model="curDepart"
                :show-all-levels="false"
                :props="departProps"
                change-on-select
                @change="selectDepart">
              </el-cascader>
              <el-button type="primary" v-if="btnVisible" @click="close">确定</el-button>
            </el-form-item>
            <el-form-item label="职务" prop="duty">
              <el-input v-model="currentTeam.duty"></el-input>
            </el-form-item>
            <el-form-item label="办公电话" prop="telphone">
              <el-input v-model="currentTeam.telphone"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="introduction">
              <editor v-model="currentTeam.introduction" height="300px"></editor>
            </el-form-item>
            <el-form-item label="是否展示">
              <el-switch
                v-model="currentTeam.visible"
                active-text="展示"
                inactive-text="隐藏">
              </el-switch>
            </el-form-item>
          </el-card>

      </el-col>
      <el-col :span="7">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-form-item label="头像" prop="image">
            <image-uploader v-model="currentTeam.image" :max-size="10240" :width="200" :height="200"></image-uploader>
          </el-form-item>

        </el-card>

      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary"  @click="save('form',1)">保存</el-button>

      <el-button @click="back">返回</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import Editor from "@/components/editor";
import ImageUploader from "@/components/image-uploader";

export default {
  props: {
    isClose: Boolean
  },
  created() {
    this.refresh();
  },
  mounted() {
    this.$watch("currentTeam", val => {
      this.curDepart = [];
      this.getParentIds(this.departTree, val.departId);
    });
  },
  computed: {
    ...mapGetters({
      currentTeam: "currentTeam",
      departTree: "departTree",
      uploadImgAttr: "uploadImgAttr"
    })
  },
  data() {
    return {
      btnVisible: false,
      curDepart: [],
      departProps: {
        label: "departName",
        value: "id",
        children: "children"
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
        ],
        introduction: [
          { required: true, message: "请输入简介", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    close() {
      this.btnVisible = false;
    },
    getParentIds(data, id) {
      data.map((item, index) => {
        if (item.id === id) {
          this.curDepart = item.parentIds;
          this.curDepart.push(id);
        } else {
          if (item.children) {
            this.getParentIds(item.children, id);
          }
        }
      });
    },
    selectDepart(value) {
      this.btnVisible = true;
      if (value) {
        this.currentTeam.departId = value[value.length - 1];
      }
    },
    save(formName, status) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store
            .dispatch("addOrUpdateTeamS", this.currentTeam)
            .then(ret => {
              this.$notify({
                title: "添加成功",
                type: "success"
              });
              this.back();
            });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$emit("close");
    },
    refresh() {
      var para = {};
      this.$store.dispatch("getDepartTree", para).then(ret => {});
    }
  },
  components: { Editor, ImageUploader }
};
</script>
<style>
</style>
